<template>
  <div class="emoji-picker-container">
    <!-- 触发按钮 -->
    <div 
      class="emoji-trigger"
      @click="togglePicker"
      ref="triggerRef"
    >
      <slot>
        <!-- <img 
          src="/icon/emoji.png" 
          alt="表情" 
          class="w-[1.25rem] h-[1.25rem] cursor-pointer"
        /> -->
      </slot>
    </div>

    <!-- 表情选择器 -->
    <div 
      v-if="showPicker" 
      class="emoji-picker-wrapper"
      :class="pickerPositionClass"
      ref="pickerRef"
    >
      <EmojiPicker 
        :native="true"
        :hideSearch="true"
        :hideGroupIcons="false"
        :hideGroupNames="false"
        :disableSkinTones="true"
        :displayRecent="true"
        :staticTexts="i18nZh"
        :groupNames="groupNamesZh"
        @select="onSelectEmoji"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from 'vue'
import EmojiPicker from 'vue3-emoji-picker'
import 'vue3-emoji-picker/css'

// 定义props
interface Props {
  position?: 'top' | 'bottom' | 'left' | 'right'
  closeOnSelect?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  position: 'bottom',
  closeOnSelect: true
})

// 中文翻译
const i18nZh = {
  search: '搜索表情',
  clear: '清除',
  notFound: '未找到表情',
  skinTone: '肤色',
  categories: {
    search: '搜索结果',
    recent: '最近使用',
    smileys: '表情与人物',
    people: '人物',
    animals: '动物与自然',
    food: '食物与饮料',
    activities: '活动',
    travel: '旅行与地点',
    objects: '物体',
    symbols: '符号',
    flags: '旗帜'
  },
  categorieslabel: '表情类别'
}

// 分类名称中文翻译
const groupNamesZh = {
  smileys_people: '表情与人物',
  animals_nature: '动物与自然',
  food_drink: '食物与饮料',
  activities: '活动',
  travel_places: '旅行与地点',
  objects: '物体',
  symbols: '符号',
  flags: '旗帜',
  recent: '最近使用'
}

// 定义emit
const emit = defineEmits<{
  (e: 'select', emoji: any): void
}>()

// 状态
const showPicker = ref(false)
const triggerRef = ref<HTMLElement | null>(null)
const pickerRef = ref<HTMLElement | null>(null)

// 计算picker位置的类名
const pickerPositionClass = computed(() => {
  return {
    'picker-top': props.position === 'top',
    'picker-bottom': props.position === 'bottom',
    'picker-left': props.position === 'left',
    'picker-right': props.position === 'right'
  }
})

// 切换表情选择器显示/隐藏
const togglePicker = () => {
  showPicker.value = !showPicker.value
}

// 选择表情
const onSelectEmoji = (emoji: any) => {
  emit('select', emoji)
  
  if (props.closeOnSelect) {
    showPicker.value = false
  }
}

// 点击外部关闭选择器
const handleClickOutside = (event: MouseEvent) => {
  if (showPicker.value && 
      pickerRef.value && 
      triggerRef.value && 
      !pickerRef.value.contains(event.target as Node) && 
      !triggerRef.value.contains(event.target as Node)) {
    showPicker.value = false
  }
}

// 添加和移除点击外部事件监听
onMounted(() => {
  document.addEventListener('click', handleClickOutside)
})

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
})
</script>

<style scoped>
.emoji-picker-container {
  position: relative;
  display: inline-block;
}

.emoji-trigger {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.emoji-picker-wrapper {
  position: absolute;
  z-index: 10;
}

.picker-top {
  bottom: 100%;
  left: 0;
  margin-bottom: 0.5rem;
}

.picker-bottom {
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
}

.picker-left {
  right: 100%;
  top: 0;
  margin-right: 0.5rem;
}

.picker-right {
  left: 100%;
  top: 0;
  margin-left: 0.5rem;
}

/* 自定义表情选择器样式 */
:deep(.v3-emoji-picker) {
  --ep-color-border: #E5E7EB;
  --ep-color-sbg: #F9FAFB;
  --ep-color-active: #2563EB;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border: 1px solid #E5E7EB;
}

/* 隐藏底部的代码显示区域 */
:deep(.v3-footer) {
  display: none !important;
}
</style> 